<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<script src="<%=basePath %>js/jquery-1.4.2.min.js"></script>
		<script src="<%=basePath %>js/jquery.Jcrop.min.js"></script>
		<link rel="stylesheet" href="<%=basePath %>css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
		<script language="javascript" type="text/javascript" src="<%=basePath %>/js/preview.js"></script>
		<script language="javascript" type="text/javascript" src="<%=basePath %>/js/ajaxupload.js"></script>
	</head>
	<body>
	<div id="outer">
	<div class="jcExample">
	<div class="article">
		<h1>Jcrop - Crop Behavior</h1>

		<!-- This is the image we're attaching Jcrop to <img src="demo_files/flowers.jpg"  id="cropbox"/>-->
		
		<div id="fileInputprv"></div>
		<!-- This is the form that our event handler fills -->
		<form action="<%=basePath %>image/addImg.do" method="post" onsubmit="return checkCoords();" enctype="multipart/form-data" >
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />
			<input type="file" name="fileInput" id="fileInput" onchange="imgPreview('fileInput')"/>
			<input type="submit" value="Crop Image" />
		</form>

		<p>
			<b>An example server-side crop script.</b> Hidden form values
			are set when a selection is made. If you press the <i>Crop Image</i>
			button, the form will be submitted and a 150x150 thumbnail will be
			dumped to the browser. Try it!
		</p>
		<div style="width:120px;height:90px;overflow:hidden;"id="fileInput2prv">
		</div>
		<div style="width:320px;height:240px;overflow:hidden;"id="fileInput3prv"> 
		</div>
		<div id="dl_links">
			<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
			<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
		</div>
	</div>
	</div>
	</div>
	<ul>
	<li id="example1" class="example">
		<p>You can style button as you want</p>
		<div class="wrapper">
			<div id="button1" class="button">选择文件</div>
		</div>
		<p>Uploaded files:</p>
		<ol class="files"></ol>
	</li>
	
	<li id="example2" class="example">
		<p>You can make a list of allowed file types</p>
		<a href="#" id="button2">Upload Image</a>
		<p class="text"></p>		
		
		
		<!-- /Example 4 -->
	</li>
	<li id="example3" class="example">
		<p>This script even works inside a form</p>		
		<form action="#" method="post">
			<p>Field 1 <input type="text" /></p>		
			<div>
				<input id="button3" type="file" />
			</div>
			<p>Uploaded files:</p>
			<ol class="files"></ol>
			<p>
				<input class="submit" type="submit" value="Submit form"/>	
			</p>
		</form>
	</li>
</ul>
	</body>
</html>
<script language="Javascript">
	
	//设置X,Y轴以及宽高
	function updateCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	
	//检查是否选择了图片
	function checkCoords() {
		if (parseInt($('#w').val()))
			return true;
		alert('Please select a crop region then press submit.');
		return false;
	};
	
	//预览
	function imgPreview(imgObj) {
		 var imgwidth="",imgheight="";

		jQuery.imagePreview({id:imgObj+'prv',upload:imgObj,preObj:imgObj+'prv',imgid:'cropbox',width:imgwidth,height:imgheight});
		jQuery.imagePreview({id:imgObj+'2prv',upload:imgObj,preObj:imgObj+'2prv',imgid:'preview',width:imgwidth,height:imgheight});
		jQuery.imagePreview({id:imgObj+'3prv',upload:imgObj,preObj:imgObj+'3prv',imgid:'preview2',width:imgwidth,height:imgheight});
		//jQuery剪切
		/*
		$('#cropbox').Jcrop( {
			aspectRatio : 1,
			onSelect : updateCoords
		});
		*/
		//
		setTimeout(function(){
			 var theimage =  new Image();
			 var imgwidth,imgheight;
			     theimage.src = $('#cropbox').attr("src");
			 
			     imgwidth = theimage.width;
			     imgheight = theimage.height;
			     var jcrop_api = $.Jcrop('#cropbox');
			     jcrop_api.setOptions({
						minSize: [ 120, 90 ],//最小宽度高度
						maxSize: [ 1024, 768 ],//最大宽度高度
						aspectRatio: 4/3,//宽高比例
						onChange: showPreview,
						onSelect: showPreview
					});

					//即时浏览图片
				function showPreview(coords) {
					
					if (parseInt(coords.w) > 0){
						var rx = 120 / coords.w;
						var ry = 90 / coords.h;
						jQuery('#preview').css({
							width: Math.round(rx * imgwidth) + 'px',
							height: Math.round(ry * imgheight) + 'px',
							marginLeft: '-' + Math.round(rx * coords.x) + 'px',
							marginTop: '-' + Math.round(ry * coords.y) + 'px'
						});

						rx = 320 / coords.w;
						ry = 240 / coords.h;
						jQuery('#preview2').css({
							width: Math.round(rx * imgwidth) + 'px',
							height: Math.round(ry * imgheight) + 'px',
							marginLeft: '-' + Math.round(rx * coords.x) + 'px',
							marginTop: '-' + Math.round(ry * coords.y) + 'px'
						});
					}
				}
			},100);
	   
	}


	
		$(document).ready(function(){
			// 预览
			
			
			/* Example 1 */
			var button = $('#button1'), interval;
			
			new AjaxUpload(button, {
				action: '<%=basePath %>image/addImg.do', 
				name: 'fileInput',
				onSubmit : function(file, ext){
					// change button text, when user selects file			
					button.text('Uploading');
									
					// If you want to allow uploading only 1 file at time,
					// you can disable upload button
					this.disable();
					
					// Uploding -> Uploading. -> Uploading...
					interval = window.setInterval(function(){
						var text = button.text();
						if (text.length < 13){
							button.text(text + '.');					
						} else {
							button.text('Uploading');				
						}
					}, 200);
				},
				onComplete: function(file, response){
					button.text('Upload');
								
					window.clearInterval(interval);
								
					// enable upload button
					this.enable();
					
					// add file to the list
					$('<li></li>').appendTo('#example1 .files').text(file);						
				}
			});
		
			/* Example 2 */
			new AjaxUpload('button2', {
	            action: '<%=basePath %>image/addImg.do',
				data : {
					'key1' : "This data won't",
					'key2' : "be send because",
					'key3' : "we will overwrite it"
				},
				onSubmit : function(file , ext){
	                // Allow only images. You should add security check on the server-side.
					if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
						/* Setting data */
						this.setData({
							'key': 'This string will be send with the file'
						});					
						$('#example2 .text').text('Uploading ' + file);	
					} else {					
						// extension is not allowed
						$('#example2 .text').text('Error: only images are allowed');
						// cancel upload
						return false;				
					}		
				},
				onComplete : function(file){
					$('#example2 .text').text('Uploaded ' + file);				
				}		
			});
			
			/* Example3 */
			new AjaxUpload('button3', {
				action: '<%=basePath %>image/addImg.do',
				name: 'fileInput',
				onComplete : function(file){
					$('<li></li>').appendTo($('#example3 .files')).text(file);
				}	
			});		
			
		
			
			new AjaxUpload('button4', {
				action: '<%=basePath %>image/addImg.do',
				onSubmit : function(file , ext){
					$('#button4').text('Uploading ' + file);
					this.disable();	
				},
				onComplete : function(file){
					$('#button4').text('Uploaded ' + file);				
				}		
			});	
		});


		
</script>
